<!--vue模板-->
<template>
  <div>
    <div>
      <!-- 搜索 -->
      <div class="toolbar">
        <el-input
          v-model="querycode.hcode"
          placeholder="请输入货代订单编号"
          style="width: 200px; margin-right: 10px"
        />
        <el-input
          v-model="querycode.pcode"
          placeholder="请输入供应商单号"
          style="width: 200px; margin-right: 10px"
        />
        <el-input
          v-model="querycode.code"
          placeholder="请输入客户单号"
          style="width: 200px; margin-right: 10px"
        />
        <el-button type="primary" @click="init">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </div>
      <!--表格数据-->
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        border
        row-key="id"
      >
        <el-table-column
          label="序号"
          type="index"
          width="80"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="hcode"
          label="货代单号"
          width="180"
          header-align="center"
        /><el-table-column
          prop="pcode"
          label="供应商订单号"
          width="180"
          header-align="center"
        />
        <el-table-column
          prop="code"
          label="对应客户订单号"
          width="180"
          header-align="center"
        />
        <el-table-column prop="name" label="货代名称" header-align="center" />
        <el-table-column
          prop="price"
          label="运输费用"
          width="80"
          header-align="center"
        />
        <el-table-column
          prop="start"
          label="始发地"
          width="150"
          header-align="center"
        />
        <el-table-column
          prop="end"
          label="目的地"
          width="150"
          header-align="center"
        />
        <el-table-column
          prop="endtime"
          label="抵达日期"
          width="150"
          header-align="center"
        />
        <el-table-column
          label="状态"
          width="180"
          header-align="center"
          align="center"
        >
          <template #default="{ row }">
            <div v-if="row.status == 3">
              运输中
              <el-button
                v-if="user.roleName == '货代'"
                type="primary"
                size="small"
                @click="finish(row.code, row.status)"
                >送达</el-button
              >
            </div>
            <div v-if="row.status == 4">已送达</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Huo
      ref="huo"
      :visible="isShow"
      @close="isShow = false"
      @refresh="init()"
    />
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { hquery, updateStatus, hUpdateStatus } from "@/api/order";
import { getUser } from "@/utils/session.js";
import Huo from "./Huo.vue";
//表格数据
const tableData = ref([]);
let user;
const huo = ref(null);
//是否显示新增用户
const isShow = ref(false);
const querycode = ref({
  code: "",
  pcode: "",
  hcode: "",
  name: ""
});
//更新状态用

function reset() {
  querycode.value.code = "";
  querycode.value.pcode = "";
  querycode.value.hcode = "";
  init();
}
async function finish(code, status) {
  let order = ref({
    code: "",
    status: ""
  });
  order.value.code = code;
  order.value.status = status;
  let res = await updateStatus(order.value);
  let res1 = await hUpdateStatus(order.value);
  if (res1.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    init();
  }

  //刷新部门列表
  // emits("refresh");
  // cls();
}

//方法
async function init() {
  let params = {
    pcode: querycode.value.pcode,
    code: querycode.value.code,
    hcode: querycode.value.hcode,
    name: querycode.value.name
  };
  console.log(params);

  let res = await hquery(params);
  if (res.code == 200) {
    tableData.value = res.data;
  }
}

//生命周期钩子
onBeforeMount(() => {
  user = getUser();
  if (user.roleName != "货代") {
    querycode.value.name = "";
  } else {
    querycode.value.name = user.account;
  }
  init();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.toolbar {
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  padding-left: 20px;
}
</style>
